<template>
    <div class="login-madal">
        <!-- mask遮罩层 -->
        <div class="mask" @click="closeLoginModal"></div>
        <!-- 白色盒子 -->
        <div class="login-box">
            <img class="close" src="../assets/img/close.png" @click="closeLoginModal" alt="">

            <ul class="title">
                <li :class="isShowForm?'active':''" @click="isShowForm=true">手机号码登录</li>
                <li class="shu">|</li>
                <li :class="isShowForm?'':'active'" @click="weixinClick">微信扫码登录</li>
            </ul>
            <div class="body">
                <form v-show="isShowForm">
                    <div class="input-group">
                        <input type="text" placeholder="请输入手机号" v-model="phoneValue">
                    </div>
                    <div class="input-group">
                        <slide-verify :l="42" :r="20" :w="360" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
                    </div>
                    <div class="input-group">
                        <input type="text" placeholder="请输入短信验证码" v-model.trim="smsCode">
                        <div class="btn get-sms-code" :class="isShowCount?'has-count':''">
                            <span v-show="!isShowCount" @click="getSMScode">获取验证码</span>
                            <span v-show="isShowCount">{{ count }} s</span>
                        </div>
                    </div>
                    <div class="btn" @click="login">登录</div>
                </form>
                <div id="weixin" v-show="!isShowForm">
                    二维码展示
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations,mapActions} from "vuex"
import { validatePhoneNumber } from "@/utils"
import {SendSMSAPI,PhoneLoginAPI,BindPhoneAPI} from "@/request/api"
export default {
    data () {
        return {
            // 是否展示表单的变量
            isShowForm:true,
            // 滑动验证码的文本
            msg: "向右滑动",
            // 用户输入的手机号文本
            phoneValue:"15918796216",
            // 用户输入的验证码文本
            smsCode:"23",
            // count 倒计时用的数字
            count:0,
            maxCount:3,
            // 是否展示倒计时的数字
            isShowCount:false
        }
    },
    methods:{
        
        ...mapMutations({
            changeIsShowLoginModal:"handleLoginModal/changeIsShowLoginModal",
            changeIsLogined:"loginStatus/changeIsLogined"
        }),
        ...mapActions({
            asyncChangeIsShowToast:"handleToast/asyncChangeIsShowToast",
            asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
        }),
        weixinClick(){// 点击切换微信扫码登录这一项，并向微信扫码登录
            this.isShowForm=false;

            // 微信登录第一步：申请微信登录二维码
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(window.btoa("http://127.0.0.1:8088" + _this.$route.path)),
                // 调用样式文件
                href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9",
            });

        },
        countDown(){
            // 把count改回60
            this.count=this.maxCount
            let timer = setInterval(()=>{
                this.count--
                // 每一次count变化的时候，都需要判断count是不是等于0，  如果等于0
                if(this.count===0){
                    // 关闭定时器
                    clearInterval(timer)
                    // 显示回 “获取验证码”
                    this.isShowCount = false;
                }
            },1000)
        },
        verifyFn(){
            // 1、用户输入的手机号是否合法，   不合法就return
            if(!validatePhoneNumber(this.phoneValue)){
                this.asyncChangeIsShowToast({
                    msg:"请输入正确的手机号码！",
                    type:"warning"
                })

                return true
            }

            // 2、滑块验证码是否通过验证，  没通过就return
            // if(this.msg=="向右滑动" || this.msg=="再试一次"){
            //     alert("请滑动滑块到正确位置！")
            //     return true
            // }
        },  
        async getSMScode(){
            //  分析 获取短信验证码 业务逻辑
            
            // 1、用户输入的手机号是否合法，   不合法就return
            // 2、滑块验证码是否通过验证，  没通过就return
            // if(this.verifyFn())return;
            // 3、发送短信验证码的请求--- 假如能够成功发起请求，我们还要处理一个倒计时

            // 发请求
            // SendSMS({
            //     phone:this.phoneValue,
            // }).then(res=>{
            //     if(res.code===0){
            //         // 业务成功
                        // this.isShowCount = true;
                        // this.countDown();
            //     }else{
            //         // 业务失败
            //     }
            // }).catch(err=>{
            //    alert(err)
            // })


            let res = await SendSMSAPI({
                phone:this.phoneValue,
            });
            
            // 所有的请求之后都要进行这个业务判断，而且，大部分失败的情况，代码都是一样
            // 所以这个判断要抽取
            // if(res.code===0){
            //     // console.log(res);
            //     // 发短信成功了，做倒计时
            //     this.isShowCount = true;
            //     this.countDown();    
            // }else{
            //     alert(res.message)
            // }
            
            // 判断res是不是false
            if(!res)return;
            // 业务成功要执行的代码

            // 提示用户发送成功
            this.asyncChangeIsShowToast({
                msg:res.message,
                type:"success"
            })

            // 显示倒计时
            this.isShowCount = true;
            // 执行倒计时
            this.countDown();    
            

        },
        async login(){
            // 点击登录按钮
            // 1、用户输入的手机号是否合法，   不合法就return
            // 2、滑块验证码是否通过验证，  没通过就return
            if(this.verifyFn())return;

            // 3、短信验证码有没有输入
            if(!this.smsCode){
                this.asyncChangeIsShowToast({
                    msg:"请输入短信验证码",
                    type:"warning"
                })
                return
            }

            // 4、发送登录请求
            let uuid = localStorage.getItem("uuid");
            let res = null;
            if(uuid){
                // 有uuid的情况, 绑定手机号
                res = await BindPhoneAPI({
                    verifyCode:this.smsCode,
                    phone:this.phoneValue,
                    uuid
                })
            }else{
                // 没有uuid  普通手机号登录
                res = await PhoneLoginAPI({
                    verifyCode:this.smsCode,
                    phone:this.phoneValue,
                });
            }
            
            if(!res)return;
            // 登录成功后的逻辑：
            // console.log(res);
            // 1、提示用户登录成功
            this.asyncChangeIsShowToast({
                msg:"登录成功！",
                type:"success"
            })
            // 2、关闭登录窗口
            this.changeIsShowLoginModal(false);
            // 3、保存token值到localStorage中
            localStorage.setItem("x-auth-token", res["x-auth-token"])
            
            // 4、登录状态值切换（这个值影响页面信息的展示： 比如用户信息，比如登录按钮和购物车按钮）
            this.changeIsLogined(true);

            // 5、清除uuid,清除地址栏上的code
            if(uuid){
                localStorage.removeItem("uuid");
                // 清除地址栏上的code(路由跳转到当前路径即可)
                this.$router.push(this.$route.path)
            }
            

            // 登录成功之后，获取用户信息
            // let res2 = await GetUserInfoAPI()
            // console.log("用户信息为：",res2);
            this.asyncChangeUserInfo()

        },
        closeLoginModal(){
            this.changeIsShowLoginModal(false)
        },
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        }
    }
}
</script>

<style lang = "less" scoped>
@import url("../assets/styles/global.less");
.login-madal{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }

    /* 白色盒子 */
    .login-box{
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        margin: auto;
        .close{
            position: absolute;
            right: 60px;
            top: 15px;
            cursor: pointer;
        }
        .title{
            display: flex;
            justify-content: center;
            padding-top: 35px;
            font-size: 18px;
            color: #ccc;
            li{
                cursor: pointer;
            }
            li.active{
                color: #333;
            }
            .shu{
                margin: -2px 10px 0;
                cursor: auto;
            }
        }
        .body{
            width: 360px;
            margin: 0 auto;
            padding-top: 25px;

            form{
                .input-group{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    input{
                        height: 48px;
                        flex:1;
                        text-indent: 10px;
                    }
                }
                
                .get-sms-code{
                    width: 80px;
                    padding: 0 10px;
                    margin-left: 10px;
                }
                .btn{
                    height: 50px;
                    background-color: @base-color;
                    color:#fff;
                    text-align: center;
                    line-height: 50px;
                    cursor: pointer;
                    /* letter-spacing: 5px; */
                }

                .has-count{
                    background-color: #ccc;
                }
            }
        }
    }
}

/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
    .slide-verify-slider{
        margin-top: 0;
    }
}

#weixin{
    display: flex;
    justify-content: center;
    margin-top: -10px;
}
</style>